﻿<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/plug/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/plug/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/plug/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/plug/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="${ctx}/static/plug/h-ui.admin/css/style.css" />

<title>详细流水</title>
</head>
<body>
	<div class="page-container">
		<div>
			日期范围： <input type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'endTime\')||\'%y-%M-%d\'}',dateFmt:'yyyy-MM-dd HH:mm:ss' })" id="startTime"
				class="input-text Wdate" style="width: 180px;"> - <input type="text"
				onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'startTime\')}',maxDate:'%y-%M-%d',dateFmt:'yyyy-MM-dd HH:mm:ss' })" id="endTime"
				class="input-text Wdate" style="width: 180px;"> 
			
			<c:if test="${parkingLotCustomers != null}">
				停车场：
				<select id="custId" style="width: 120px; height: 30px;">
				<option value="">全部</option>
					<c:forEach var="parkingLotCustomer" items="${parkingLotCustomers}">
						<option value="${parkingLotCustomer.id}">${parkingLotCustomer.parkingName}</option>
					</c:forEach>
				</select>
			</c:if>
				
				
			<button type="submit" class="btn btn-success radius" onclick="reloadData()">
				<i class="Hui-iconfont">&#xe665;</i> 搜索
			</button>
		</div>
		
		<div class="mt-20">
			<table class="table table-border table-bordered table-hover table-bg table-sort">
				<thead>
					<tr class="text-c">
						<th width="15%">停车场</th>
						<th width="20%">总收入</th>
						<th width="20%">现金收款</th>
						<th width="20%">网络收款</th>
						<th width="15%">停车券优惠金额</th>
						<th width="10%">操作</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div>
	</div>
	<!--请在下方写此页面业务相关的脚本-->
	<script type="text/javascript" src="${ctx}/static/plug/My97DatePicker/4.8/WdatePicker.js"></script>
	<script type="text/javascript" src="${ctx}/static/plug/datatables/1.10.0/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/plug/laypage/1.2/laypage.js"></script>
	<script type="text/javascript">
		var dataTable;
		$(function() {
			dataTable = $(".table-sort").DataTable($.extend(true, {}, TABLE_CONSTANT.DATA_TABLES.DEFAULT_OPTION, {
				"ajax" : function(data, callback, settings) {
					var param = getQueryParam(data);
					$.ajax({
						type : "POST",
						url : "${ctx}/bill/propList",
						cache : false, //禁用缓存
						data : param, //传入已封装的参数
						dataType : "json",
						success : function(result) {
							callback(result);
						},
						error : function(XMLHttpRequest, textStatus, errorThrown) {
							alert("查询失败");
						}
					});
				},
				"columns" : [  {
					"data" : "parkName"
				},{
					"data" : "totalMoney"
				},{
					"data" : "cashMoney"
				},{
					"data" : "wxMoney"
				},{
					"data" : "couponMoney"
				}, {
					"data" : null
				}],
				"columnDefs" : [ {
					targets : 1,
					render : function(a, b, c, d) {
						var html = (c.totalMoney/10).toFloat(2);
						return html;
					}
				} ,{
					targets : 2,
					render : function(a, b, c, d) {
						var html = (c.cashMoney/10).toFloat(2);
						return html;
					}
				} ,{
					targets : 3,
					render : function(a, b, c, d) {
						var html = (c.wxMoney/10).toFloat(2);
						return html;
					}
				} ,{
					targets : 4,
					render : function(a, b, c, d) {
						var html = (c.couponMoney/10).toFloat(2);
						return html;
					}
				} ,{
					targets : 5,
					render : function(a, b, c, d) {
						var html = genOperatirHtml(c.status, c.custId);
						return html;
					}
				}]
			}));
		});

		function genStatusHtml(status) {
			var html = "";
			if (status == 1) {
				html += "<span class=\"label label-success radius\">已启用</span>";
			} else if (status == 2) {
				html += "<span class=\"label radius\">已停用</span>";
			}
			return html;
		}

		function genOperatirHtml(status, id) {
			var html="";
			
			html += "<a title=\"停车场的详细停车记录\" href=\"javascript:;\" onclick=\"addOrUpdate('停车场的详细停车记录','${ctx}/bill/income?custId="
				+ id + "','1200','500')\" class=\"ml-5\" style=\"text-decoration:underline\">";
			html += "<i class=\"Hui-iconfont\">停车记录</i></a> ";
			
			return html;
		}

		function getQueryParam(data) {
			var param = {};
			var startTime = $("#startTime").val();
			var endTime = $("#endTime").val();
			var entNo = $("#entNo").val();
			var custId = $("#custId").val();
			if (startTime) {
				param.startTime = startTime;
			}
			if (endTime) {
				param.endTime = endTime;
			}
			if (entNo) {
				param.entNo = entNo;
			}
			if (custId) {
				param.custId = custId;
			}

			//自定义的查询条件 后面加
			param.draw = data.draw;
			param.startIndex = data.start;
			param.pageSize = data.length;
			return param;
		}

		function reloadData() {
			dataTable.ajax.reload();
		}
		
		function addOrUpdate(title,url,width,height) {
			layer_show(title,url,width,height);
		}
	</script>
</body>
</html>
